<template>
  <div class="card-info">
    <!--    <a-button type="primary">新增<a-icon type="plus" /></a-button>-->
    <div v-if="cardList && cardList.length" class="card-list">
      <div v-for="(item, index) of cardList" :key="index" class="card-item">
        <split-title :text="`卡信息${index + 1}`" />
        <descriptions :columns="columns" :data-source="item" />
        <!--        <div style="margin-top: 15px">
          <div>操作</div>
          <div class="buttons">
            <a-button size="small">延期</a-button>
            <a-button size="small">修改门禁权限</a-button>
            <a-button size="small">注销</a-button>
            <a-button size="small">挂失</a-button>
          </div>
        </div>-->
      </div>
    </div>
    <empty v-else />
  </div>
</template>

<script>
import InfoTitle from '@gis/lib/components/splitter/info-title.vue';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';
import Empty from '@gis/lib/components/Empty/index.vue';

export default {
  name: 'card-info',
  components: { SplitTitle, Empty, InfoTitle },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      cardList: [],
      columns: [
        { label: '所属院落', key: 'yard_name' },
        { label: '授权房间', key: 'room_full_name' },
        { label: '芯片id', key: 'card_num' },
        { label: '卡类型', key: 'dic_card_type' },
        {
          label: '状态',
          key: 'use_state',
          format: (v) => (v ? '有效' : '无效'),
        },
        {
          label: '是否授权',
          key: 'is_auth',
          format: (v) => (v ? '已授权' : '未授权'),
        },
        { label: '押金', key: 'deposit' },
        { label: '授权日期', key: 'deadline' },
        { label: '授权门禁', key: 'machine_door_name', colSpan: 24 },
      ],
    };
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(data = {}) {
        if (data.people_id) this.getDataAsync();
      },
    },
  },
  methods: {
    async getDataAsync() {
      const params = {
        people_id: this.data.people_id,
      };
      let { data = [] } = await this.$axios.get('/xw-microservice/xw-actual-data/v3/card/list', {
        params,
      });
      // data = [
      //   {
      //     machine_door_name:
      //       "站北东横街3号院前大门左侧,站北东横街3号院前大门右侧,站北东横街3号院后门",
      //     is_auth: true,
      //     dic_card_type: "IC卡片",
      //     card_type: "D0008_1",
      //     link_id: "ff80808162521d500162560c62db101d",
      //     card_id: "ff80808162521d500162560c62da101c",
      //     card_num: "2211685300",
      //     use_state: true,
      //     is_report_loss: false,
      //     yard_name: "站北东横街3号院",
      //     room_full_name: "站北东横街3号院>3栋>1单元>102",
      //     deposit: "0",
      //     deadline: "2028-03-24",
      //   },
      // ];
      this.cardList = data;
    },
  },
};
</script>

<style scoped lang="less">
.card-info {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
}
</style>
